<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <template>
            <a-col :md="6" :sm="8">
              <a-form-item label="任务名称查询">
                <a-input
                  placeholder="请输入任务名称查询"
                  v-model="queryParam.name"
                  @change="searchQuery"
                  :maxLength="20"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="摄像机名称查询">
                <a-input
                  placeholder="请输入摄像机名称查询"
                  v-model="queryParam.cameraName"
                  @change="searchQuery"
                  :maxLength="20"
                ></a-input>
              </a-form-item>
            </a-col>

            <!--						<a-col :md="6" :sm="8">-->
            <!--							<a-form-item label="手机号码">-->
            <!--								<a-input placeholder="请输入手机号码查询" v-model="queryParam.mobile"></a-input>-->
            <!--							</a-form-item>-->
            <!--						</a-col>-->
            <!--						<a-col :md="6" :sm="8">-->
            <!--							<a-form-item label="所属域:">-->
            <!--								<a-select placeholder="请选择所属域" showSearch showArrow optionFilterProp="children"-->
            <!--									:getPopupContainer="(node) => node.parentNode" :defaultActiveFirstOption="false" v-model="queryParam.cameraRegionId">-->
            <!--									<a-select-option v-for="item in regionIdList" :key="item.rescueId"-->
            <!--										:value="item.regionId">{{item.regionId}}</a-select-option>-->
            <!--								</a-select>-->
            <!--							</a-form-item>-->
            <!--						</a-col>-->
          </template>

          <a-col :md="6" :sm="8">
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-button type="primary" @click="searchQuery" icon="search"
                >查询</a-button
              >
              <a-button
                type="primary"
                @click="resetParam"
                icon="reload"
                style="margin-left: 8px"
                >重置
              </a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator" style="border-top: 5px">
      <a-button @click="addDevRecordTask" type="primary" icon="plus"
        >添加录像任务</a-button
      >
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay" @click="handleMenuClick">
          <a-menu-item key="1">
            <a-icon type="delete" @click="batchDel" />
            删除
          </a-menu-item>
          <a-menu-item key="2">
            <a-icon type="delete" @click="batchRunStart" />
            启用
          </a-menu-item>
          <a-menu-item key="3">
            <a-icon type="delete" @click="batchRunStop" />
            停用
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          批量操作
          <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a
          style="font-weight: 600"
          >{{ selectedRowKeys.length }}</a
        >项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelecteds">清空</a>
      </div>

      <a-table
        ref="table"
        bordered
        size="middle"
        rowKey="taskId"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        @change="handleTableChange"
      >
        <template slot="avatarslot" slot-scope="text, record">
          <div class="anty-img-wrap">
            <a-avatar
              shape="square"
              :src="getAvatarView(record.avatar)"
              icon="user"
            />
          </div>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="handleDetail(record)">详情</a>
          <a-divider type="vertical" />
          <a-popconfirm
            title="确定启用吗?"
            v-if="record.used == 0"
            @confirm="() => changeUsed(record)"
          >
            <a>启用</a>
          </a-popconfirm>
          <a-popconfirm
            title="确定停用吗?"
            v-if="record.used == 1"
            @confirm="() => changeUsed(record)"
          >
            <a>停用</a>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a-popconfirm
            title="确定删除吗?"
            @confirm="() => handleDelete(record.taskId)"
          >
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->
    <record-task-modal ref="modalForm" @ok="modalFormOk"></record-task-modal>
  </a-card>
</template>	

<script>
import { getFileAccessHttpUrl } from "@/api/manage";
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import { getAction, postAction } from "@/api/manage";
import JInput from "@/components/jeecg/JInput";
import RecordTaskModal from "./modules/RecordTaskModal";

export default {
  name: "DevRecordList",
  mixins: [JeecgListMixin],
  components: {
    JInput,
    RecordTaskModal,
  },
  data() {
    return {
      timer: null, //定时器
      description: "这是用户管理页面",
      queryParam: {
        name: "",
        cameraName: "",
        cameraRegionId: "",
      },
      regionIdList: [
        {
          regionId: "44010200492000000001",
        },
        {
          regionId: "4401020049",
        },
      ],
      recycleBinVisible: false,
      columns: [
        /*{
					  title: '#',
					  dataIndex: '',
					  key:'rowIndex',
					  width:60,
					  align:"center",
					  customRender:function (t,r,index) {
					    return parseInt(index)+1;
					  }
					},*/
        {
          title: "任务名称",
          align: "center",
          dataIndex: "name",
        },
        {
          title: "摄像机名称",
          align: "center",
          dataIndex: "cameraName",
        },
        {
          title: "任务类型",
          align: "center",
          dataIndex: "typeId",
          customRender: function (text) {
            if (text == 4) {
              return "长期";
            } else if (text == 3) {
              return "天";
            } else if (text == 2) {
              return "周";
            } else if (text == 1) {
              return "月";
            } else if (text == 0) {
              return "单次";
            }
          },
        },
        {
          title: "状态",
          align: "center",
          dataIndex: "taskState",
          customRender: function (text) {
            if (text == 1) {
              return "禁用";
            } else if (text == 2) {
              return "等待";
            } else if (text == 3) {
              return "运行中";
            } else if (text == 4) {
              return "异常";
            } else if (text == 5) {
              return "已结束";
            }
          },
        },
        // {
        //   title: '周期信息',
        //   align: "center",
        //   dataIndex: 'cycleInfo',
        //   customRender: function(text) {
        //     if (!text) {
        //       return "--"
        //     }
        //   }
        // },
        // {
        //   title: '是否启用',
        //   align: "center",
        //   dataIndex: 'used',
        //   customRender: function(text) {
        //     if (text == 0) {
        //       return "停用"
        //     } else if (text == 1) {
        //       return "启用"
        //     }
        //   }
        // },
        {
          title: "域信息",
          align: "center",
          // dataIndex: 'cameraRegionId',
          dataIndex: "regionName",
        },
        {
          title: "开始时间",
          align: "center",
          dataIndex: "startDateTime",
          customRender: function (startDateTime, listDataSource) {
            if (listDataSource.typeId == 0) {
              return startDateTime;
            } else if (listDataSource.typeId == 4) {
              return startDateTime;
            }
          },
        },
        {
          title: "结束时间",
          align: "center",
          dataIndex: "endDateTime",
          customRender: function (endDateTime, listDataSource) {
            if (listDataSource.typeId == 0) {
              return endDateTime;
            } else if (listDataSource.typeId == 4) {
              return "--";
            }
          },
        },
        {
          title: "更新时间",
          align: "center",
          dataIndex: "updateTime",
        },
        {
          title: "创建时间",
          align: "center",
          dataIndex: "createTime",
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: {
            customRender: "action",
          },
          align: "center",
        },
      ],
      url: {
        list: "/record/page",
        delete: "/record/delete",
        deleteBatch: "/record/delete-batch",
        changeUsed: "/record/used",
        runUsedBatch: "/record/used/batch",
      },
    };
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG["domianURL"]}/${this.url.importExcelUrl}`;
    },
  },

  watch: {
    $route: {
      handler: function (oldVal, newVal) {
        console.log("录像任务开始");
        this.timeInetrval();
      },
      deep: true, // 深度监听
      immediate: true, // 使监听在页面加载完成后执行，避免数据无变化或初进页面时监听不执行
    },
    selectedRowKeys: {
      handler() {
        console.log(this.selectedRowKeys);
        if (this.selectedRowKeys.length > 0) {
          clearInterval(this.timer);
          this.timer = null;
        }
      },
    },
  },

  beforeDestroy() {
    console.log("销毁定时器执行成功");
    clearInterval(this.timer);
    this.timer = null;
  },

  

  methods: {
    timeInetrval() {
      let that = this;
      this.timer = setInterval(() => {
        console.log("定时器执行成功");
        that.loadData();
        that.loading = false;
      }, 1000);
    },
    // 清空按钮
    onClearSelecteds() {
      this.selectedRowKeys = [];
      this.selectionRows = [];
      this.onSelectChange(this.selectedRowKeys);
    },

    onSelectChange(selectedRowKeys) {
      console.log(selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      if (selectedRowKeys.length == 0) {
        this.timeInetrval();
      }
    },

    getAvatarView: function (avatar) {
      return getFileAccessHttpUrl(avatar);
    },
    
    handleMenuClick(e) {
      if (e.key == 1) {
        this.batchDel();
      }
      if (e.key == 2) {
        this.batchRunStart();
      }
      if (e.key == 3) {
        this.batchRunStop();
      }
    },
    changeUsed(record) {
      getAction(this.url.changeUsed + "/" + record.taskId).then((res) => {
        if (res.code == "00000") {
          this.loadData();
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    resetParam() {
      this.queryParam = {};
      this.queryParam.cameraRegionId = "";
      this.loadData(1);
    },
    // **************************************************************************************************************
    // 新增录像配置
    addDevRecordTask() {
      console.log(this.$parent);
      // 关闭指定tab页面
      this.$parent.closeRouteViewTab("/record/addrecordtask");
      // 打开指定tab页面
      this.$router.push({
        // 路由页面
        name: "/record/addrecordtask",
        // 路由参数传递
        params: {},
      });
    },
    //查看录像配置
    goDevChannelRecord(record) {
      console.log(this.$parent);
      // 关闭指定tab页面
      this.$parent.closeRouteViewTab("/record/devchannelrecord");
      // 打开指定tab页面
      this.$router.push({
        // 路由页面
        name: "/record/devchannelrecord",
        // 路由参数传递
        params: {
          dev: record,
        },
      });
    },
    batchRunStart(type) {
      if (!this.url.runUsedBatch) {
        this.$message.error("请设置url.runUsedBatch属性!");
        return;
      }
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning("请选择一条记录！");
        return;
      } else {
        // var ids = "";
        console.log(this.selectedRowKeys);
        // for (var a = 0; a < this.selectedRowKeys.length; a++) {
        //   this.selectedRowKeys[a] = parseInt(this.selectedRowKeys[a])
        // }
        var that = this;
        this.$confirm({
          title: "确认启用",
          content: "是否启用选中数据?",
          onOk: function () {
            that.loading = true;
            let batchParam = {};
            if (type == 2) batchParam["ids"] = that.selectedRowKeys;
            else batchParam["idList"] = that.selectedRowKeys;
            batchParam["used"] = 1;
            postAction(that.url.runUsedBatch, batchParam)
              .then((res) => {
                if (res.code == "00000") {
                  let msg = "启用成功";
                  if (res.msg.toLowerCase() !== "ok") {
                    msg = res.msg;
                  }
                  that.$message.success(msg);
                  that.loadData();
                  that.onClearSelecteds();
                } else {
                  that.$message.warning(res.msg);
                }
              })
              .finally(() => {
                that.loading = false;
              });
          },
        });
      }
    },
    batchRunStop(type) {
      if (!this.url.runUsedBatch) {
        this.$message.error("请设置url.runUsedBatch属性!");
        return;
      }
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning("请选择一条记录！");
        return;
      } else {
        // var ids = "";
        console.log(this.selectedRowKeys);
        // for (var a = 0; a < this.selectedRowKeys.length; a++) {
        //   this.selectedRowKeys[a] = parseInt(this.selectedRowKeys[a])
        // }
        var that = this;
        this.$confirm({
          title: "确认停用",
          content: "是否停用选中数据?",
          onOk: function () {
            that.loading = true;
            let batchParam = {};
            if (type == 2) batchParam["ids"] = that.selectedRowKeys;
            else batchParam["idList"] = that.selectedRowKeys;
            batchParam["used"] = 0;
            postAction(that.url.runUsedBatch, batchParam)
              .then((res) => {
                if (res.code == "00000") {
                  let msg = "停用成功";
                  if (res.msg.toLowerCase() !== "ok") {
                    msg = res.msg;
                  }
                  that.$message.success(msg);
                  that.loadData();
                  that.onClearSelecteds();
                } else {
                  that.$message.warning(res.msg);
                }
              })
              .finally(() => {
                that.loading = false;
              });
          },
        });
      }
    },
    // **************************************************************************************************************
  },
};
</script>
<style scoped>
@import "~@assets/less/common.less";
</style>
